<template>
 <div class='chat'>
     <Chatlistleft :noreadmsglist="noreadmsglist" :frindslist="frindslist" @selectOne="selectOne">删除</Chatlistleft>
     <div class="chathot">
         <Chatnew :noreadmsglist="noreadmsglist" :newchat="newchat">{{newchat.author}}</Chatnew>
     </div>
 </div>
</template>

<script>
import Chatnew from '@/components/chat/chatnew.vue'
import Chatlistleft from '@/components/chat/chatlistleft.vue'
   export default {
      data() {
          return {
              frindslist:[],
              newchat:{},    //当前聊天对象的信息
              noreadmsglist:[]
          }
      },
      //生命周期 - 创建完成
     created(){ 
        // this.getChatlist()
        let con=io.connect("http://localhost:3001")

        //监控登录
        con.emit("login",{
            id:this.$store.state.readerdata.id
        })

        //获取好友列表
        con.emit("users")
        con.on("users",(data)=>{
            // console.log(data)
                this.frindslist=data.data.filter(item=>{
                return item.id!=this.$store.state.readerdata.id
            })
        })

        //实时监控发送的消息
        con.on("sendMsg",(data)=>{
            // console.log(data.data.data)
            this.noreadmsglist.push(data.data.data)
        })

        //监控好友上线
        con.on("addUser",(res)=>{
            // console.log(res)
             //获取好友列表
            con.emit("users")
            con.on("users",(data)=>{
            
                this.frindslist=data.data.filter(item=>{
                return item.id!=this.$store.state.readerdata.id
            })
        })
            // this.frindslist.forEach(item=>{
            //     item.socketid=res.socketid
            // })
        })


        //监控被挤下线
        con.on("loginout",function(data){
            // console.log(data)
            con.disconnect()
        })

        //监控所有未读信息
         con.on("unread",(data)=>{
            //  console.log(data.data)
             this.$store.commit("putnoreadmsglist",data.data)
                this.noreadmsglist=data.data
                // console.log(this.noreadmsglist)
            }) 
        
     },

     //DOM挂载完毕
     mounted() {
    
     },
     components: {
         Chatnew,
         Chatlistleft
     },
      methods: {
          //选择好友聊天
          selectOne(e){
            //   console.log(e)
              this.newchat=e
          },

        //  async getChatlist(){
        //     let res=await this.axios.get("chat/chat")
        //     // console.log(res)
        //     this.frindslist=res.data.data.filter(item=>{
        //         return item.id!=this.$store.state.readerdata.id
        //     })
        //   }
         
        
      },
 }
</script>

<style lang='less' scoped>
.chat {
    display: flex;

  .chathot {
    
      flex:3
  }
}
</style>